function Page(el,options = {}){
    this.el = document.querySelector(el)
    this.options = options
    this.init()
}
// 启动插件
Page.prototype.init=function(){
   this.createTag()  //调用追加功能按钮标签方法
    this.parentTag()  //调用设置最大div盒子样式的方法
    this.bindevent()  //调用最大div盒子事件委托方法

}
// 给父设置事件委托
Page.prototype.bindevent=function(){
    this.el.onclick = (evt)=>{
        let e = evt || window.event    //获取事件对象
        let target = e.target || e.srcElement //获取当前操作的标签
        if(target.nodeName === 'P'){        //判断点击的标签是否是p标签
            switch(target.innerText){
                case this.options.pageTag.first:    //实现点击首页
                this.options.pageInfo.pageNum = 1
                break;
                case this.options.pageTag.prev:    //实现点击上一页
                if(this.options.pageInfo.pageNum == 1)return
                this.options.pageInfo.pageNum--
                break;
                case this.options.pageTag.next:     //实现点击下一页
                if(this.options.pageInfo.pageNum == this.options.pageInfo.totalPage)return
                this.options.pageInfo.pageNum++
                break;
                case this.options.pageTag.last:    //实现点击末页
                this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                break;
                default:
                if(parseInt(target.innerHTML)>0){     //点击页码切换
                    this.options.pageInfo.pageNum=parseInt(target.innerHTML)

                }
                break;
            }
            this.createTag() //页码显示数值改变 清除之前的按钮和页码数值标签 重新创建按钮和页码数值标签



            // this.el.querySelector('p:nth-of-type(3)').innerHTML = ''  //清空点击之前显示的页码数值标签
            // this.createNum()          //重新创建当前页码数值标签 并且追加到页码按钮标签                 
            // 注意上面45 56两行注释的代码可以代替41行的 this.createTag() 方法 
        }


    }

}


// 设置父元素div的样式
Page.prototype.parentTag=function(){
    this.el.style.display = 'flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'




}
//追加首页 上一页 下一页 末页 页码等按钮标签
Page.prototype.createTag=function(){
    this.el.innerHTML= ''  //清空点击之前的标签
    for(let key in this.options.pageTag ){
        this.createbiaoqian('p',this.options. pageTag[key],this.el)
    }

    this.createNum() //调用追加页码数值到页码按钮标签方法

}

// 追加页码数值 放到页码按钮标签
Page.prototype.createNum = function(){
   let pnumobj = this.el.querySelector('p:nth-of-type(3)')    
   pnumobj.style.border = 'none'
   pnumobj.style.margin = '0px'
   pnumobj.style.padding = '0px'

    //  for(let i = 1 ; i<6 ; i++){
    //     this.createbiaoqian('p',i,pnumobj)

    //  }
    
    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage=Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage
    // 追加页码数值算法
    if(totalPage<7){
        for(let i = 1; i <=totalPage ;i++ ) this.createbiaoqian('p',i,pnumobj)

    }else if(pageNum<5){
        for(let i = 1; i <=5 ;i++ ) this.createbiaoqian('p',i,pnumobj)
           
            this.createbiaoqian('p','...',pnumobj)
            this.createbiaoqian('p',totalPage-1,pnumobj)
            this.createbiaoqian('p',totalPage,pnumobj)
        
    }else if(pageNum==5){
        for(let i = 1; i <=7 ;i++ ) this.createbiaoqian('p',i,pnumobj)
           
            this.createbiaoqian('p','...',pnumobj)
            this.createbiaoqian('p',totalPage-1,pnumobj)
            this.createbiaoqian('p',totalPage,pnumobj)
        
    }else if(pageNum > 5 && pageNum < totalPage-4){
        for(let i = 1; i <=2 ;i++ )this.createbiaoqian('p',i,pnumobj)
      
            this.createbiaoqian('p','...',pnumobj)
            this.createbiaoqian('p',pageNum-2,pnumobj)
            this.createbiaoqian('p',pageNum-1,pnumobj)
            this.createbiaoqian('p',pageNum,pnumobj)
            this.createbiaoqian('p',pageNum+1,pnumobj)
            this.createbiaoqian('p',pageNum+2,pnumobj)
            this.createbiaoqian('p','...',pnumobj)
            this.createbiaoqian('p',totalPage-1,pnumobj)
            this.createbiaoqian('p',totalPage,pnumobj)
        
    }else if(pageNum>=totalPage-4){
        for(let i = 1; i <=2 ;i++ ) this.createbiaoqian('p',i,pnumobj)
        this.createbiaoqian('p','...',pnumobj)
           
        
        for(let i =totalPage-4;i<=totalPage;i++)this.createbiaoqian('p',i,pnumobj)
            
        
    }
}
// 追加标签并且设置样式
Page.prototype.createbiaoqian = function(tagname,content,fatherobj){
    let pobj = document.createElement(tagname)
    pobj.innerText = content
    pobj.style.border = '1px solid black'
    pobj.style.display = 'inline-block'
    pobj.style.margin = '0 5px'
    pobj.style.padding = '0 5px'
    if(content==this.options.pageInfo.pageNum)pobj.style.background = 'orange'  //如果标签内容和pageNum【页码】数值相等标签的背景颜色变为orange


    fatherobj.appendChild(pobj)


}
